<template>
  <div id="app" >
    <transition name="fade">
      <router-view/>
    </transition>
  </div>
</template>

<script>
export default {
  data: function () {
    return this.$store.state.frame
  },
  created () {
    try {
      document.body.removeChild(document.getElementById('appLoading'))
      setTimeout(function () {
        document.getElementById('app').style.display = 'block'
      }, 500)
    } catch (e) {

    }
  }
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.custom-loader {
  animation: loader 1s infinite;
  display: flex;
}
@-moz-keyframes loader {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes loader {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes loader {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes loader {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.loop{
    animation:rotating 1.2s linear infinite;
  }
  @keyframes rotating{
      from{transform:rotate(0)}
      to{transform:rotate(360deg)}
    }
.cuspacer {flex-grow: 0.6!important;}
.datastyle {text-align:center;white-space:nowrap;}
.reportstyle{text-align:center;}
.listyle {list-style-type:none;float:left}
  .svgTable>th {text-align: center;border:1px solid cyan;padding: 2px;}
  .svgTable>td {text-align: center;border:1px solid cyan;padding: 2px;}
  .code {
    width: 184px;
    height: 40px;
    border: 1px solid red;
  }
</style>
